<template>
	<view>
		<view class="tab">
			<view class="tab-item" :class="tabIndex==0?'active':''"  @click="chgTab(0)">发送通知 <view :class="tabIndex==0?'active':''"></view></view>
			<view class="tab-item" :class="tabIndex==1?'active':''"  @click="chgTab(1)">发布记录 <view :class="tabIndex==1?'active':''"></view></view>
		</view>
		
		
		<view v-if="tabIndex==1">
			<scroll-view :refresher-triggered=refresherTriggered :refresherThreshold=refresherThreshold
					@refresherrefresh='refresherrefresh()' refresher-background="#FFFFFF"  @scrolltolower='nextPage()'
					 
					 lower-threshold="500" class="" scroll-y :style="{height: Height+'px'}">
			<view v-if="!isNull" v-for="itm in MessageFromList" @click="goDetail(itm.id)">
				<view class="date">{{itm.createTime}}</view>
				<view  class="msg_item">
					<view class="title">{{itm.title}}</view>
					<view class="desc">{{itm.content}}</view>
					<view class="footer">
						<view class="to">发送到：{{itm.toClassifyName}}>{{itm.toClassName}}</view>
						<text class="count">{{itm.readTotal}}人已读</text>
					</view>
				</view>
			</view>
			<view v-if="isNull" class="order_null">
				<image src="../../static/null/jl@2x.png"></image>
				<text>暂时还没有记录~</text>
			</view>
			</scroll-view>
			
		</view>
		
		<view v-if="tabIndex == 0">
			
			<view class="content">
				<view class="item"><input placeholder="输入标题" v-model="titlecontent" style="padding: 10px 0;" /></view>
				<view class="item" style="border-bottom: 0;">
					<textarea placeholder="输入通知内容" v-model="detailcontent" style="padding: 10px 0;height: 100px;"></textarea>
				</view>
			</view>
				
			<view style="margin-top:10px;background-color: white;padding: 10px;">
				<view class="item">
					<view class="label">通知类型</view>
					<view style="display: flex;align-items: center;">
						<picker @change="bindPickerChange" :range-key="'name'" :value="tabList[index].id" :range="tabList">
							<view class="uni-input">{{tabList[index].name}}</view>
						</picker>
					    <image class="icon_arrow" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/right_arrow.png"></image>
					</view>
				</view>
				
				<view class="item" style="border:0" @tap="openLevel()">
					<view class="label">选择系别、班级</view>
					<view style="display: flex;align-items: center;">
						<pxingPicker ref='pickerName' :deepLength='deepLength' :chooseList='chooseList' :defaultChooseList='defaultChooseList' @confirm='confirm'></pxingPicker>
						<view class="">
							{{select}}
						</view>
					    <image class="icon_arrow" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/right_arrow.png"></image>
					</view>
				</view>
				<view class="">

				</view>
			</view>
			
			<view class="btn" @tap="send">
				确认发布
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {aui} from '../../components/aui-picker/common/aui/js/aui.js';
	import auiPicker from '../../components/aui-picker/aui-picker.vue';
	import pxingPicker  from '@/components/pxing-picker/pxing-picker.vue'
	export default {
		 components: {
		            auiPicker,
					pxingPicker,
		        },
		data() {
			return {
				hasNextPage:true,
				Height:400,
				select: '请选择',
				deepLength: 2,
				chooseList: [],
				defaultChooseList:[],
				areaList:[],
				treeData: [{
						value:1,
						label:'饮料',
						children:[
							{value:11,label:'可乐'},
							{value:12,label:'果粒橙'}
						]
					},
					{
						value:2,
						label:'零食',
						children:[
							{value:21,label:'饼干'},
							{value:22,label:'薯片'}
						]
					}],
				pickerValueDefault: [0, 0, 0],
				tabIndex:0,
				index1:0,
				index2:0,
				index:0,
				tabList: [{
						id: "0",
						name: '请选择'
					},{
						id: "1",
						name: '全校'
					}, {
						id: "2",
						name: '老师'
					},
					{
						id: "3",
						name: '学员'
					},
				],
				list:[],
				titlecontent:'',
				detailcontent:'',
				toClassId:'',
				toClassifyId:'',
				pageNum:1,
				pageSize:10,
				MessageFromList:[],
				isNull:false,
				shopId:''
			}
		},
		onLoad() {
			this.shopId = uni.getStorageSync('shopId')
			this.getClassOrActivityList()
			this.getMessageFromList()
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.Height = res.windowHeight - uni.upx2px(120) //windoHeight为窗口高度，主要使用的是这个
				}
			})
		},
		computed: mapState(['loginState', 'userInfo']),
		methods: {
			//发送通知
			send(){
				console.log(this.toClassifyId)
				console.log(this.selectedValue)
				if(this.titlecontent===''||this.detailcontent===''||this.flag==0){
					uni.showToast({
						title: '请检查通知内容是否完整！',
						duration: 1500,
						icon: "none",
						
					});
					return
				}else{
				this.$api.sendMessage({
					title: this.titlecontent,
					content: this.detailcontent,
					role:1,
					flag:this.flag,
					toClassifyId: this.toClassifyId,
					toClassId: this.toClassId
				}).then((res) => {
					if (res.data.code == 200) {
						// this.changeTab(0)
						this.treeData = []
						uni.showToast({
							title: '发送成功！',
							duration: 1500,
							icon: "none",
							
						});
						setTimeout(()=> {
						          this.getMessageFromList()
						     }, 700);
							 this.chgTab(1)
							 this.index = 0
							 this.titlecontent = ''
							 this.detailcontent = ''
							 this.select = '请选择'
					}
					
				})
				}
			},
			//发布记录
			getMessageFromList(){
				this.pageNum = 1
				this.$api.getMessageFromList({
					shopId:this.shopId
				},this.pageNum, this.pageSize).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data)
						var arr = res.data.dataMap.list
						this.MessageFromList = arr
						this.hasNextPage = res.data.dataMap.hasNextPage
						this.isNull = this.MessageFromList.length == 0 ? true : false
					}
				})
			},
			nextPage() {
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					console.log(this.pageNum)
					this.$api.getMessageFromList({
						shopId:this.shopId
					},this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							console.log(res.data)
							var arr = res.data.dataMap.list
							for (var i = 0; i < arr.length; i++) {
								this.MessageFromList.push(arr[i])
							}
							this.hasNextPage = res.data.dataMap.hasNextPage
						}
					})
				}
				
			
			},
			confirm(e){
				console.log(e)
				this.select = e[this.deepLength-1].label;
				console.log(this.select)
				this.toClassifyId = e[0].value;
				this.toClassId = e[1].value;
				this.$refs.pickerName.hide();
			},
			openLevel() {
			    this.$refs.pickerName.show();
			    },
			    
			chgTab(index){
				this.tabIndex = index;
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
				this.flag = e.target.value
			},
			goDetail(id){
				uni.navigateTo({
					url:'notice_detail?id='+id
				})
			},
			//获取该学校系别、班级
			getClassOrActivityList(){
				console.log(this.userInfo.userInfo.teacherLeaderShopIds[0])
				this.$api.getClassOrActivityList({
					shopId:this.userInfo.userInfo.teacherLeaderShopIds[0]
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.treeData = []
						this.list = res.data.dataMap
						for(var i = 0;i<this.list.length;i++){
							this.treeData.push({
								value: "1001",
								label: "一级菜单1",
								children:[]
							})
						}
						for(var i = 0;i<this.list.length;i++){
							for(var j = 0;j<this.list[i].data.length;j++){
								this.treeData[i].children.push({
									value: "1001",
									label: "一级菜单1",
								})
							}
						}
						
						for(var i = 0;i<this.list.length;i++){
							this.treeData[i].value = this.list[i].id
							this.treeData[i].label = this.list[i].classifyName
							
						}
						for(var i = 0;i<this.list.length;i++){
							for(var j = 0;j<this.list[i].data.length;j++){
								this.treeData[i].children[j].value = this.list[i].data[j].id
								this.treeData[i].children[j].label = this.list[i].data[j].className
							}
						}
						var defaulttwo = [0,0];
						var lentwo = 2;
						this.chooseList = this.treeData;
						this.defaultChooseList = defaulttwo;
						this.deepLength = lentwo;
						console.log(this.treeData)
						
						
					}
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.order_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	
	.order_null text {
		margin: 0 auto;
		color: #c8c8c8;
	}
	
	.order_null image {
		margin: 60rpx auto;
		width: 300rpx;
		height: 300rpx;
	}
	.LinkagePicker{
		width: 100rpx;
		height: 100rpx;
	}
page{background-color: #F8F8F8;}
.tab{
  	 display: flex;
	 background-color: white;
  	 justify-content: space-around;
	 padding:15px 15px 0px 15px;
	 box-sizing: border-box;
	 border-bottom: 1px solid #eeeeee;
  	 .active{font-weight: bold;}
  	 .tab-item{
		 font-size: 28rpx;
  		 border-bottom: 5px solid white;
  		 .active{
  		   	background:linear-gradient(90deg, rgb(255,228,106), rgb(249,155,68));
  		   	border-radius: 20rpx;
  		   	margin:auto;
  		   	margin-top:5px;
  		   	height:5px;
  		   	width:60%;}
  		 }
  }
  
  .btn{
     background-color: #FF5533;
     border-radius:50px;
     padding: 10px;
     width: 90%;
     box-sizing: border-box;
     font-size: 28rpx;
     margin:auto;
	 margin-top:50px;
     color:white;
	 text-align: center;
  }
  .item{border-bottom: 1px solid #f5f5f5;display: flex;justify-content: space-between;align-items: center;}
  .content{background-color: white;padding: 10px;}
  .label{padding: 10px 0 ;color:#333333;font-weight: bold;}
  
  .date{text-align: center;color:#999999;padding:5px;}
  .msg_item{
	  background:white;
	  margin:10px;
	  border-radius: 5px;
	  padding: 10px;
	  .title{color:#333333;font-weight: bold;font-size:28rpx;}
	  .desc{color:#333333;padding:10px 0;}
	  .footer{display: flex;justify-content: space-between;
	     .to{color:#999999}
		 .count{color:#FF5533}
	  }
  }
</style>
